<template>
	<view class="box">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#6bc665"></u-tabs>
		<view class="content">
			<view class="businessBox" v-if="showList.length>0">
				<view class="itemCoupon" v-for="(c,i) in showList" :key="i">
					<view class="item" >
						<view class="left">
							<view class="price">
								<span style="font-size: 28rpx;">￥</span><span
									style="font-size: 56rpx;font-weight: bold;">{{Math.floor(c.coupon_amount)}}</span>
							</view>
							<view class="type" style="font-size: 24rpx;">
								<span v-if="c.cate==1">满减券</span>
								<span v-if="c.cate==2">折扣券</span>
								<span v-if="c.cate==3">代金券</span>
							</view>
						</view>
						<view class="right">
							<view class="title">
								<span v-if="c.is_no_threshold==1&c.cate==1">无门槛</span>
								<span v-if="c.is_no_threshold==1&c.cate==2">无门槛打{{Math.floor((c.threshold_amount-c.coupon_amount)/c.threshold_amount*10)}}折</span>
								<span v-if="c.is_no_threshold==1&c.cate==3">无门槛代{{Math.floor(c.coupon_amount)}}元</span>
								<span v-if="c.is_no_threshold==0&c.cate==1">满{{Math.floor(c.threshold_amount)}}减少{{Math.floor(c.coupon_amount)}}</span>
								<span v-if="c.is_no_threshold==0&c.cate==2">满{{Math.floor(c.threshold_amount)}}打{{Math.floor((c.threshold_amount-c.coupon_amount)/c.threshold_amount*10)}}折</span>
								<span v-if="c.is_no_threshold==0&c.cate==3">满{{Math.floor(c.threshold_amount)}}可代{{Math.floor(c.coupon_amount)}}元</span>
							</view>
							<view class="btn" @click="goPage">
								<view class="ct">立即使用</view>
								
							</view>
							<view class="time">
								有效期：{{(c.created_at).slice(0,-8)}}至{{(c.expire_time).slice(0,-8)}}
							</view>
						</view>

					</view>

				</view>
			</view>
			<view class="noDAta" style="width: 410rpx;height: 240rpx; margin: 60rpx auto;" v-else >
				<image src="../../static/empty.png" mode="widthFix" style="width: 410rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCoupons
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [{
						name: "满减券"
					},
					{
						name: "折扣券"
					},
					{
						name: "代金券"
					}
				],
				current: 0,
				couponList: [],
				showList: []

			};
		},
		onLoad() {
			this.initData()
		},

		methods: {
			initData() {
				getMyCoupons().then((res) => {
					console.log(res);
					this.couponList = res.data
					this.showList =res.data[0].member_coupon
					console.log(this.showList);
				})
			},
			change(v) {
				this.current = v
				this.showList = this.couponList[v].member_coupon
				
			},
			goPage(){
				uni.switchTab({
					url:'/pages/store/store'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		min-width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.content {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 30rpx;

	}

	.businessBox {
		margin-top: 10rpx;

		.business {
			display: flex;
			font-size: 30rpx;
			color: #333333FF;
			align-items: center;

			.avatar {
				margin-right: 10rpx;

			}
		}

		.itemCoupon .item {
			width: 710rpx;
			height: 161rpx;
			display: flex;
			position: relative;
			background-image: url('/static/1.png');
			background-size: cover;
			background-repeat: no-repeat;
			margin-top: 20rpx;

			.left {
				width: 150rpx;
				text-align: center;
				color: #6BC665FF;

				.left .price {
					line-height: 110rpx;
				}

				.left .type {
					line-height: 130rpx;
				}
			}

			.right {
				width: 560rpx;
				box-sizing: border-box;
				padding: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.right .title {
				font-size: 30rpx;
				color: #333333;
			}

			.right .btn {

				display: flex;
				flex-direction: row-reverse;

			}

			.right .btn .ct {
				width: 150rpx;
				height: 50rpx;
				background: #6BC665;
				border-radius: 25rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
			}

			.right .time {

				color: #999999;
				font-size: 24rpx;
			}

		}

	}
</style>